<template>
  <nav-bar />
  <view class="inventory-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="onBack">&#8592;</text>
      <text class="nav-title">盘点管理</text>
      <text class="nav-add" @click="onAddInventory">+</text>
    </view>

    <!-- 盘点列表 -->
    <view class="inventory-list">
      <view class="inventory-item" v-for="item in inventoryList" :key="item.inventory_id" @click="onViewDetail(item)">
        <view class="item-header">
          <text class="item-id">盘点单号：{{ item.inventory_id }}</text>
          <text class="item-status" :class="getStatusClass(item.inventory_type)">{{ getStatusText(item.inventory_type) }}</text>
          <text v-if="canEdit" class="item-delete" @click.stop="onDeleteInventory(item)">🗑</text>
        </view>
        <view class="item-content">
          <view class="item-info">
            <text class="info-label">盘点人：</text>
            <text class="info-value">{{ item.inventory_user_name }}</text>
          </view>
          <view class="item-info">
            <text class="info-label">创建时间：</text>
            <text class="info-value">{{ item.create_time }}</text>
          </view>
          <view class="item-info" v-if="item.remark">
            <text class="info-label">备注：</text>
            <text class="info-value">{{ item.remark }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 创建盘点弹窗 -->
    <uni-popup ref="createPopup" type="center">
      <view class="create-popup">
        <view class="popup-header">
          <text class="popup-title">创建盘点单</text>
          <text class="popup-close" @click="closeCreatePopup">×</text>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <view class="label">盘点类型</view>
            <picker class="value-picker" :range="typeList" range-key="name" @change="onTypeChange">
              <view class="picker-value">{{ selectedType ? selectedType.name : '请选择' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <view class="label">备注</view>
            <textarea 
              class="remark-textarea" 
              v-model="form.remark" 
              placeholder="请输入备注信息"
              :maxlength="200"
              show-confirm-bar="false"
            />
            <view class="word-count">{{ form.remark.length }}/200</view>
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @click="onCreateInventory">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 盘点详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">盘点详情</text>
          <text class="popup-close" @click="closeDetailPopup">×</text>
        </view>
        <view class="popup-content">
          <view class="detail-info">
            <view class="info-row">
              <text class="info-label">盘点单号：</text>
              <text class="info-value">{{ currentDetail.inventory_id }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">盘点类型：</text>
              <text class="info-value">{{ getStatusText(currentDetail.inventory_type) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">盘点人：</text>
              <text class="info-value">{{ currentDetail.inventory_user_name }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">创建时间：</text>
              <text class="info-value">{{ currentDetail.create_time }}</text>
            </view>
            <view class="info-row" v-if="currentDetail.remark">
              <text class="info-label">备注：</text>
              <text class="info-value">{{ currentDetail.remark }}</text>
            </view>
          </view>

          <!-- 查看明细按钮 -->
          <view class="view-details-btn" @click="onViewDetails">
            <text class="btn-text">查看盘点明细</text>
            <text class="btn-icon">→</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @click="closeDetailPopup">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 添加盘点明细弹窗 -->
    <uni-popup ref="addDetailPopup" type="center">
      <view class="add-detail-popup">
        <view class="popup-header">
          <text class="popup-title">添加盘点明细</text>
          <text class="popup-close" @click="closeAddDetailPopup">×</text>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <view class="label">商品</view>
            <picker class="value-picker" :range="productList" range-key="name" @change="onProductChange">
              <view class="picker-value">{{ selectedProduct ? selectedProduct.name : '请选择' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <view class="label">预计数量</view>
            <view class="quantity-info">
              <text class="quantity-value">{{ detailForm.inventory_number }}</text>
              <text class="quantity-label">{{ currentDetail.inventory_type === 1 ? '货架数量' : '仓库数量' }}</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @click="onCreateDetail">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 自定义消息框组件 -->
    <message-box
      v-model="showMsgBox"
      :title="msgBoxTitle"
      :content="msgBoxContent"
      :showCancel="msgBoxShowCancel"
      :confirmText="msgBoxConfirmText"
      :cancelText="msgBoxCancelText"
      @confirm="onMsgBoxConfirm"
      @cancel="onMsgBoxCancel"
    />

    <!-- 自定义 Toast 组件 -->
    <toast
      v-model="showToast"
      :content="toastContent"
      :type="toastType"
      :duration="toastDuration"
    />
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'
import Toast from '@/components/toast/toast.vue'

// 获取用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// Toast 相关
const showToast = ref(false)
const toastContent = ref('')
const toastType = ref('')
const toastDuration = ref(2000)

function showCustomToast(content, type = '', duration = 2000) {
  toastContent.value = content
  toastType.value = type
  toastDuration.value = duration
  showToast.value = true
}

// 消息框相关
const showMsgBox = ref(false)
const msgBoxTitle = ref('')
const msgBoxContent = ref('')
const msgBoxShowCancel = ref(true)
const msgBoxConfirmText = ref('确定')
const msgBoxCancelText = ref('取消')
let msgBoxCallback = null

function openMsgBox({ title = '', content = '', showCancel = true, confirmText = '确定', cancelText = '取消', callback = null }) {
  msgBoxTitle.value = title
  msgBoxContent.value = content
  msgBoxShowCancel.value = showCancel
  msgBoxConfirmText.value = confirmText
  msgBoxCancelText.value = cancelText
  msgBoxCallback = callback
  showMsgBox.value = true
}

function onMsgBoxConfirm() {
  if (msgBoxCallback) msgBoxCallback(true)
}

function onMsgBoxCancel() {
  if (msgBoxCallback) msgBoxCallback(false)
}

// 盘点列表数据
const inventoryList = ref([])
const currentDetail = ref({})

// 盘点类型列表
const typeList = ref([
  { id: 1, name: '货架盘点' },
  { id: 2, name: '仓库盘点' }
])
const selectedType = ref(null)

// 表单数据
const form = ref({
  inventory_type: null,
  inventory_user: null,
  remark: ''
})

// 商品列表
const productList = ref([])
const selectedProduct = ref(null)

// 盘点明细表单
const detailForm = ref({
  inventory: null,
  product: null,
  inventory_number: '',
  inventory_actual_number: 0,
  inventory_difference_number: 0,
  inventory_difference_reason: '',
  remark: ''
})

// 弹窗引用
const createPopup = ref(null)
const detailPopup = ref(null)
const addDetailPopup = ref(null)

// 是否可以编辑
const canEdit = computed(() => {
  return userInfo.value && (userInfo.value.is_superuser === 1 || userInfo.value.is_superuser === 2)
})

// 搜索和筛选相关
const searchKeyword = ref('')
const filterOptions = [
  { value: 'all', label: '全部' },
  { value: 'difference', label: '有差异' },
  { value: 'no-difference', label: '无差异' }
]
const currentFilter = ref(filterOptions[0])

// 虚拟列表相关
const itemHeight = 200 // 每个项目的高度（根据实际内容调整）
const visibleCount = 10 // 可视区域显示的项目数量
const scrollTop = ref(0)
const startIndex = ref(0)

// 计算过滤后的明细列表
const filteredDetails = computed(() => {
  let result = currentDetail.value.details || []
  
  // 搜索过滤
  if (searchKeyword.value) {
    result = result.filter(detail => 
      detail.product_name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  // 筛选过滤
  if (currentFilter.value.value === 'difference') {
    result = result.filter(detail => detail.inventory_difference_number !== 0)
  } else if (currentFilter.value.value === 'no-difference') {
    result = result.filter(detail => detail.inventory_difference_number === 0)
  }
  
  return result
})

// 计算可见的明细列表
const visibleDetails = computed(() => {
  return filteredDetails.value.slice(
    startIndex.value,
    startIndex.value + visibleCount
  )
})

// 计算差异数量
const differenceCount = computed(() => {
  return filteredDetails.value.filter(
    detail => detail.inventory_difference_number !== 0
  ).length
})

// 获取盘点列表
async function getInventoryList() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/product/inventory/get_inventory_list/',
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      inventoryList.value = res.data.data
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '获取盘点列表失败', 'error')
  }
}

// 获取盘点详情
async function getInventoryDetail(inventoryId) {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/product/inventory/get_inventory/${inventoryId}/`,
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      currentDetail.value = res.data.data
      detailPopup.value.open()
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '获取盘点详情失败', 'error')
  }
}

// 创建盘点单
async function onCreateInventory() {
  if (!selectedType.value) {
    showCustomToast('请选择盘点类型', 'error')
    return
  }

  form.value.inventory_type = selectedType.value.id
  form.value.inventory_user = userInfo.value.id

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/product/inventory/create_inventory/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: form.value
    })
    
    if (res.data.code === 200) {
      showCustomToast('创建成功', 'success')
      closeCreatePopup()
      getInventoryList()
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '创建失败', 'error')
  }
}

// 类型选择事件
function onTypeChange(e) {
  const index = e.detail.value
  selectedType.value = typeList.value[index]
}

// 查看详情
function onViewDetail(item) {
  getInventoryDetail(item.inventory_id)
}

// 添加盘点
function onAddInventory() {
  if (!checkPermission()) return
  selectedType.value = null
  form.value = {
    inventory_type: null,
    inventory_user: null,
    remark: ''
  }
  createPopup.value.open()
}

// 关闭创建弹窗
function closeCreatePopup() {
  createPopup.value.close()
}

// 关闭详情弹窗
function closeDetailPopup() {
  detailPopup.value.close()
}

// 返回上一页
function onBack() {
  uni.navigateBack()
}

// 检查权限
function checkPermission() {
  if (!userInfo.value) {
    showCustomToast('请先登录', 'error')
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }, 1500)
    return false
  }

  if (userInfo.value.is_superuser !== 1 && userInfo.value.is_superuser !== 2) {
    showCustomToast('您没有盘点权限', 'error')
    return false
  }

  return true
}

// 获取状态文本
function getStatusText(type) {
  return type === 1 ? '货架盘点' : '仓库盘点'
}

// 获取状态样式
function getStatusClass(type) {
  return type === 1 ? 'status-shelf' : 'status-warehouse'
}

// 获取差异数量样式
function getDifferenceClass(difference) {
  if (difference > 0) return 'difference-positive'
  if (difference < 0) return 'difference-negative'
  return ''
}

// 获取商品列表
async function getProductList() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/product/get_product_list/',
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      productList.value = res.data.data
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '获取商品列表失败', 'error')
  }
}

// 商品选择事件
function onProductChange(e) {
  const index = e.detail.value
  selectedProduct.value = productList.value[index]
  detailForm.value.product = selectedProduct.value.id
  // 获取商品数量
  getProductQuantity(selectedProduct.value.id)
}

// 获取商品数量
async function getProductQuantity(productId) {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/product/get_product/${productId}/`,
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      const product = res.data.data
      // 根据盘点类型设置预计数量
      if (currentDetail.value.inventory_type === 1) { // 货架盘点
        detailForm.value.inventory_number = product.shelf_number || 0
      } else { // 仓库盘点
        detailForm.value.inventory_number = product.warehouse_number || 0
      }
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '获取商品数量失败', 'error')
  }
}

// 添加盘点明细
function onAddDetail() {
  if (!canEdit.value) return
  selectedProduct.value = null
  detailForm.value = {
    inventory: currentDetail.value.inventory_id,
    product: null,
    inventory_number: 0,
    inventory_actual_number: 0,
    inventory_difference_number: 0,
    inventory_difference_reason: '',
    remark: ''
  }
  addDetailPopup.value.open()
}

// 创建盘点明细
async function onCreateDetail() {
  if (!selectedProduct.value) {
    showCustomToast('请选择商品', 'error')
    return
  }

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/product/inventory/create_inventory_detail/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: detailForm.value
    })
    
    if (res.data.code === 200) {
      showCustomToast('添加成功', 'success')
      closeAddDetailPopup()
      getInventoryDetail(currentDetail.value.inventory_id)
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '添加失败', 'error')
  }
}

// 实际数量变化事件
function onActualNumberChange(detail) {
  detail.inventory_difference_number = detail.inventory_actual_number - detail.inventory_number
}

// 保存盘点明细
async function onSaveDetail(detail) {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/product/inventory/update_inventory_detail/${detail.id}/`,
      method: 'POST',
      header: IntranetConfig.headers,
      data: {
        inventory_actual_number: detail.inventory_actual_number,
        inventory_difference_number: detail.inventory_difference_number,
        inventory_difference_reason: detail.inventory_difference_reason
      }
    })
    
    if (res.data.code === 200) {
      showCustomToast('保存成功', 'success')
      getInventoryDetail(currentDetail.value.inventory_id)
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    showCustomToast(error.message || '保存失败', 'error')
  }
}

// 删除盘点明细
async function onDeleteDetail(detail) {
  openMsgBox({
    title: '确认删除',
    content: '确定要删除这条盘点明细吗？',
    callback: async (confirmed) => {
      if (confirmed) {
        try {
          const res = await uni.request({
            url: IntranetConfig.domain + `api/product/inventory/delete_inventory_detail/${detail.id}/`,
            method: 'DELETE',
            header: IntranetConfig.headers
          })
          
          if (res.data.code === 200) {
            showCustomToast('删除成功', 'success')
            getInventoryDetail(currentDetail.value.inventory_id)
          } else {
            throw new Error(res.data.msg)
          }
        } catch (error) {
          showCustomToast(error.message || '删除失败', 'error')
        }
      }
    }
  })
}

// 关闭添加明细弹窗
function closeAddDetailPopup() {
  addDetailPopup.value.close()
}

// 搜索事件
function onSearch() {
  scrollTop.value = 0
  startIndex.value = 0
}

// 筛选事件
function onFilterChange(e) {
  const index = e.detail.value
  currentFilter.value = filterOptions[index]
  scrollTop.value = 0
  startIndex.value = 0
}

// 滚动事件
function onScroll(e) {
  const scrollTop = e.detail.scrollTop
  startIndex.value = Math.floor(scrollTop / itemHeight)
}

// 查看明细
function onViewDetails() {
  uni.navigateTo({
    url: `/pages/inventory/inventory_detail?id=${currentDetail.value.inventory_id}`
  })
  closeDetailPopup()
}

// 新增删除方法
async function onDeleteInventory(item) {
  openMsgBox({
    title: '确认删除',
    content: `确定要删除盘点单号 ${item.inventory_id} 吗？`,
    callback: async (confirmed) => {
      if (confirmed) {
        try {
          const res = await uni.request({
            url: IntranetConfig.domain + `api/product/inventory/delete_inventory/${item.inventory_id}/`,
            method: 'DELETE',
            header: IntranetConfig.headers
          })
          if (res.data.code === 200) {
            showCustomToast('删除成功', 'success')
            getInventoryList()
          } else {
            throw new Error(res.data.msg)
          }
        } catch (error) {
          showCustomToast(error.message || '删除失败', 'error')
        }
      }
    }
  })
}

// 页面加载
onMounted(() => {
  getInventoryList()
  getProductList()
})
</script>

<style scoped lang="scss">
.inventory-page {
  background: #f8f9fa;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  height: 96rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  .nav-back {
    color: #333;
    font-size: 44rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    &:active {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  .nav-add {
    color: #ff7e2d;
    font-size: 44rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    &:active {
      background: rgba(255, 126, 45, 0.1);
    }
  }
}

.inventory-list {
  padding: 24rpx 32rpx;
}

.inventory-item {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  }
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    .item-id {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    .item-status {
      font-size: 28rpx;
      padding: 8rpx 24rpx;
      border-radius: 24rpx;
      &.status-shelf {
        background: #e6f7ff;
        color: #1890ff;
      }
      &.status-warehouse {
        background: #f6ffed;
        color: #52c41a;
      }
    }
    .item-delete {
      margin-left: 18rpx;
      color: #ff4d4f;
      font-size: 32rpx;
      cursor: pointer;
      transition: color 0.2s;
      &:active {
        color: #cf1322;
      }
    }
  }
  .item-content {
    .item-info {
      display: flex;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .info-label {
        color: #666;
        width: 160rpx;
      }
      .info-value {
        color: #333;
        flex: 1;
      }
    }
  }
}

// 创建盘点弹窗美化，参考goods_add.vue
.create-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      &:active {
        background: #f5f5f5;
      }
    }
  }
  .popup-content {
    padding: 32rpx;
    background: #fff;
    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 30rpx;
      transition: all 0.3s;
      &:last-child {
        border-bottom: none;
      }
      .label {
        color: #333;
        width: 180rpx;
        text-align: left;
        flex-shrink: 0;
        font-weight: 500;
      }
      .value-picker {
        flex: 1;
        text-align: right;
        .picker-value {
          color: #333;
          font-size: 30rpx;
          &:empty::before {
            content: '请选择';
            color: #999;
          }
        }
      }
      .remark-textarea {
        width: 100%;
        height: 120rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        border: 1rpx solid #eee;
        padding: 24rpx;
        font-size: 30rpx;
        color: #333;
        &::placeholder {
          color: #999;
        }
      }
      .word-count {
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 16rpx;
      }
    }
  }
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fff;
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
}

// 其余弹窗、按钮、输入框、卡片等风格可继续参考goods_add.vue

.detail-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      &:active {
        background: #f5f5f5;
      }
    }
  }
  .popup-content {
    padding: 32rpx;
    background: #fff;
    .detail-info {
      margin-bottom: 32rpx;
      .info-row {
        display: flex;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .info-label {
          color: #666;
          width: 160rpx;
        }
        .info-value {
          color: #333;
          flex: 1;
        }
        .item-id {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
        .item-status {
          font-size: 28rpx;
          padding: 8rpx 24rpx;
          border-radius: 24rpx;
          &.status-shelf {
            background: #e6f7ff;
            color: #1890ff;
          }
          &.status-warehouse {
            background: #f6ffed;
            color: #52c41a;
          }
        }
      }
    }
    .view-details-btn {
      margin-top: 32rpx;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s;
      &:active {
        background: #f0f0f0;
      }
      .btn-text {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
      }
      .btn-icon {
        font-size: 36rpx;
        color: #ff7e2d;
      }
    }
  }
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fff;
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
}

.search-filter {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
  
  .search-box {
    flex: 1;
    position: relative;
    
    .search-input {
      width: 100%;
      height: 72rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 0 72rpx 0 24rpx;
      font-size: 28rpx;
      color: #333;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .search-icon {
      position: absolute;
      right: 24rpx;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 32rpx;
    }
  }
  
  .filter-box {
    width: 200rpx;
    
    .filter-picker {
      width: 100%;
      height: 72rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      
      .picker-value {
        color: #333;
        font-size: 28rpx;
      }
    }
  }
}

.statistics {
  display: flex;
  gap: 32rpx;
  margin-bottom: 24rpx;
  padding: 16rpx 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  
  .stat-item {
    display: flex;
    align-items: center;
    
    .stat-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .stat-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      
      &.difference {
        color: #ff4d4f;
      }
    }
  }
}

.virtual-list {
  height: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  
  .list-header {
    margin-bottom: 24rpx;
    
    .header-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .list-item {
    padding: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.add-detail {
  color: #ff7e2d;
  font-size: 28rpx;
  padding: 8rpx 24rpx;
  border-radius: 24rpx;
  background: #fff6ed;
  transition: all 0.3s;
  
  &:active {
    background: darken(#fff6ed, 5%);
  }
}

.item-input {
  flex: 1;
  height: 60rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 28rpx;
  color: #333;
}

.item-textarea {
  flex: 1;
  height: 120rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
  gap: 16rpx;
  
  .action-btn {
    padding: 8rpx 24rpx;
    border-radius: 24rpx;
    font-size: 24rpx;
    transition: all 0.3s;
    
    &.save {
      background: #e6f7ff;
      color: #1890ff;
      
      &:active {
        background: darken(#e6f7ff, 5%);
      }
    }
    
    &.delete {
      background: #fff1f0;
      color: #ff4d4f;
      
      &:active {
        background: darken(#fff1f0, 5%);
      }
    }
  }
}

.add-detail-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      
      &:active {
        background: #f5f5f5;
      }
    }
  }
  
  .popup-content {
    padding: 32rpx;
    background: #fff;
    
    .form-item {
      margin-bottom: 32rpx;
      
      .label {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .value-picker {
        width: 100%;
        height: 88rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        
        .picker-value {
          color: #333;
          font-size: 30rpx;
          
          &:empty::before {
            content: '请选择';
            color: #999;
          }
        }
      }
      
      .quantity-info {
        display: flex;
        align-items: center;
        gap: 16rpx;
        padding: 24rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        
        .quantity-value {
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
        }
        
        .quantity-label {
          font-size: 24rpx;
          color: #666;
          background: #e6f7ff;
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
  
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fff;
    
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
}

.quantity-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  
  .quantity-value {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  
  .quantity-label {
    font-size: 24rpx;
    color: #666;
    background: #e6f7ff;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
  }
}

.view-details-btn {
  margin-top: 32rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
  
  &:active {
    background: #f0f0f0;
  }
  
  .btn-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  
  .btn-icon {
    font-size: 36rpx;
    color: #ff7e2d;
  }
}

.item-delete {
  margin-left: 18rpx;
  color: #ff4d4f;
  font-size: 32rpx;
  cursor: pointer;
  transition: color 0.2s;
  &:active {
    color: #cf1322;
  }
}
</style> 